<template>
  <div id="app">
    <h3>欢迎光临_Vue开发的收银系统</h3>
    <p>苹果 {{ price }} ￥/ 斤，折扣 {{ discount }} 折</p>
    <p>
      输入购买的斤数
      <input type="number" v-model.number="count">
    </p>
    <p>
      <button @click="pay">结账买单</button>
    </p>
    <p>
      账单：
        总价: {{ total }} ￥元，折后价: {{ dp }} ￥元，省了: {{ total - dp }} ￥元
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10,
      discount: 8,
      count: 0,
      total: 0,
      dp: 0
    }
  },
  methods: {
    pay() {
      if(this.count <= 0) {
        this.count = 0
      }
      this.total = this.price * this.count
      this.dp = this.discount * this.count
    }
  }
}
</script>

<style>

</style>